<template>
  <section class="blog">
    <div class="blog-list-body">
      <div class="tag-title">
        {{ blogTag_currentName }}
      </div>
      <ul class="list-nav">
        <li
          v-for="item of blogList_navList"
          :key="item.value"
          :class="blogList_currentValue === item.value ? 'active' : ''"
          @click="changeBlogListClassify(item.value)"
        >
          {{ item.lable }}
        </li>
      </ul>
      <ul
        class="blog-list"
      >
        <blog-item v-for="item of blogList_list" :key="item.id" :data="item" />
      </ul>
      <div
        v-loading="loading"
        class="more-loading"
      >
        <div
          v-show="btn_moreArticle"
          class="more"
          @click="getArticleList({ more: true })"
        >
          加载更多
        </div>
      </div>
    </div>
    <recommend :page="'tag'" @changeCurrentTag="changeCurrentTag" />
  </section>
</template>

<script>
import BlogItem from '~/components/article/BlogItem'
import Recommend from '~/components/public/Recommend'

export default {
  validate({ params, redirect }) {
    if (params.id) {
      return true
    } else {
      return redirect('/')
    }
  },
  head() {
    return {
      title: this.blogTag_currentName
    }
  },
  components: {
    BlogItem,
    Recommend
  },
  data() {
    return {
      loading: false,
      blogTag_currentName: this.$route.query.name,
      blogTag_currentValue: this.$route.params.id,
      blogList_currentValue: 'new',
      blogList_navList: [{
        lable: '最新',
        value: 'new'
      }, {
        lable: '精选',
        value: 'sift'
      }, {
        lable: '热门',
        value: 'hot'
      }],
      blogList_list: [],
      pagination: 2,
      btn_moreArticle: true
    }
  },
  computed: {
    userData() {
      return this.$store.state.user.userData
    }
  },
  async asyncData({ app, params }) {
    const data = await app.$request({
      context: app,
      method: 'get',
      url: `article/getByTag/${params.id}/new/1/20`
    })
    if (!data) return
    return { blogList_list: data }
  },
  methods: {
    changeCurrentTag(id, name) {
      this.blogTag_currentValue = id
      this.pagination = 1
      this.blogList_currentValue = 'new'
      this.blogList_list = []
      this.getArticleList()
      this.blogTag_currentName = name
    },
    changeBlogListClassify(val) {
      this.blogList_currentValue = val
      this.pagination = 1
      this.blogList_list = []
      this.getArticleList()
    },
    async getArticleList({
      typeId = this.blogTag_currentValue,
      classify = this.blogList_currentValue,
      offset = this.pagination,
      limit = 20,
      more = false
    } = {}) {
      this.loading = true
      this.btn_moreArticle = false
      const data = await this.$request({
        context: this,
        method: 'get',
        url: `article/getByTag/${typeId}/${classify}/${offset}/${limit}`
      })
      this.loading = false
      if (!data) return
      if (data.length === 0) {
        this.$message.success('没有更多啦')
        if (!more) {
          this.blogList_list = []
        }
        return
      }
      if (data.length === limit) {
        this.btn_moreArticle = true
      }
      this.pagination++
      if (more) {
        this.blogList_list = [...this.blogList_list, ...data]
      } else {
        this.blogList_list = data
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import "~@/assets/css/public";

  .blog {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .blog-list-body {
      box-sizing: border-box;
      width: 890px;
      /*min-height: calc(100vh - 70px - 15px);*/
      min-height: 100vh;
      background: #fff;
      border: 1px solid $theme-color-border;

      .tag-title {
        font-size: 30px;
        font-weight: bold;
        color: $theme-color;
        text-align: center;
        line-height: 100px;
      }
    }
  }
</style>
